<template>
    <div class="login-container">
      <h2>用户登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="usernameOrPhone">用户名/手机号</label>
          <input type="text" v-model="formData.usernameOrPhone" id="usernameOrPhone" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" v-model="formData.password" id="password" required>
        </div>
        <button type="submit" class="btn btn-primary">登录</button>
        <p v-if="errorMessage" class="text-danger">{{ errorMessage }}</p>
      </form>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  export default {
    data() {
      return {
        formData: {
          usernameOrPhone: '',
          password: ''
        },
        errorMessage: ''
      };
    },
    methods: {
      handleLogin() {
        axios.post('/api/login', this.formData) // 假设后端登录接口是 /api/login
       .then(response => {
            // 登录成功，可将用户信息存储在本地存储或者Vuex（如果使用了状态管理）
            localStorage.setItem('userToken', response.data.token);
            this.$router.push('/home'); // 跳转到首页（假设首页路由是 /home）
          })
       .catch(error => {
            this.errorMessage = '登录失败，请检查用户名/手机号和密码';
          });
      }
    }
  };
  </script>
  
  <style scoped>
  .login-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  </style>